<template>
  <div id="water-level-chart" style="width: 100%;background-color:rgb(6, 30, 93);margin: 0 0 20px 0">

    <div class="water-level-chart-details">
      <dv-digital-flop :config="sumMoney" style="width:100%;height:50px;" />
    </div>

    <div id="w_l_chart" class="chart-container" style="height: 400px;width:100%;">
      <!--      <dv-conical-column-chart :config="config" style="width:100%;height:400px;background-color: transparent" />-->
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'WaterLevelChart',
  props: {
    visualData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      config: {},
      sumMoney: {}
    }
  },
  watch: {
    visualData: {
      handler(newVal, oldVal) {
        this.loadData()
        this.initData()
      },
      // 立即处理 进入页面就触发
      immediate: true,
      deep: true // 深度监听，监听到更深层级值的变化
    }
  },
  mounted() {
    // this.loadData()
    this.initData()
  },
  methods: {
    initData() {
      var chartDom = document.getElementById('w_l_chart')
      var myChart = echarts.init(chartDom)
      var option
      let sm = 0
      this.visualData.forEach(item => {
        sm += item.value
      })
      myChart.setOption(
        (option = {
          title: {
            text: '累计金额:' + sm + '万元',
            left: '1%',
            textStyle: {
              color: '#FFFFFF'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            data: this.visualData.map(function(item) {
              return item['name']
            }),
            axisLine: {
              show: false,
              lineStyle: {
                color: '#FFFFFF'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#FFFFFF'
              }
            }
          },
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }, {
            start: 0,
            end: 100
          }],
          series: {
            name: '全平台销售金额',
            type: 'line',
            data: this.visualData.map(function(item) {
              return item['value']
            }),
            markLine: {
              silent: true,
              lineStyle: {
                color: '#FFFFFF'
              },
              data: [
                {
                  yAxis: 50
                },
                {
                  yAxis: 100
                },
                {
                  yAxis: 150
                },
                {
                  yAxis: 200
                },
                {
                  yAxis: 300
                }
              ]
            }
          }
        })
      )
      option && myChart.setOption(option)
    },
    loadData() {
      this.config = {
        data: this.visualData,
        img: [
          'http://datav.jiaminghi.com//img/conicalColumnChart/1st.png',
          'http://datav.jiaminghi.com//img/conicalColumnChart/2st.png',
          'http://datav.jiaminghi.com//img/conicalColumnChart/3st.png',
          'http://datav.jiaminghi.com//img/conicalColumnChart/4st.png',
          'http://datav.jiaminghi.com//img/conicalColumnChart/5st.png',
          'http://datav.jiaminghi.com//img/conicalColumnChart/6st.png',
          'http://datav.jiaminghi.com//img/conicalColumnChart/7st.png'
        ],
        showValue: true,
        fontSize: 14
      }

      let sm = 0
      this.visualData.forEach(item => {
        sm += item.value
      })
      this.sumMoney = {
        number: [sm],
        content: '累计{nt}万元',
        formatter: (number) => {
          const numbers = number.toString().split('').reverse()
          const segs = []

          while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

          return segs.join(',').split('').reverse().join('')
        }
      }
    }
  }
}
</script>

<style lang="scss">
#water-level-chart {
  width: 20%;
  box-sizing: border-box;
  margin-left: 20px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  display: flex;
  flex-direction: column;

  .water-level-chart-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    justify-content: center;
  }

  .water-level-chart-details {
    height: 15%;
    display: flex;
    justify-content: center;
    font-size: 17px;
    align-items: flex-end;

    span {
      font-size: 35px;
      font-weight: bold;
      color: #58a1ff;
      margin: 0 5px;
      margin-bottom: -5px;
    }
  }

  .chart-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dv-water-pond-level {
    max-width: 90%;
    width: 200px;
    height: 200px;
    border: 10px solid #19c3eb;
    border-radius: 50%;

    ellipse {
      stroke: transparent !important;
    }

    text {
      font-size: 40px;
    }
  }
}
</style>
